<template>
  <div class="system-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统管理</span>
        </div>
      </template>
      <div class="content-body">
        <h3>系统基本设置</h3>
        <el-form ref="formRef" :model="formData" label-width="100px" style="max-width: 600px;">
          <el-form-item label="参数名称" prop="dictName">
            <el-input v-model="formData.dictName" placeholder="" readonly style="background-color: #f5f7fa;" />
          </el-form-item>
          <el-form-item label="参数值" prop="dictValue">
            <el-input v-model="formData.dictValue" placeholder="请输入附近多少米" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">保存设置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { dictData, updateDict } from '@/request/dict'

const formRef = ref()
const formData = reactive({
  dictName:'',
  dictValue:'',
  id:''
})

const getDictInfo = ()=>{
  dictData().then(res=>{
    formData.dictValue = res.dictValue
    formData.dictName = res.dictName
    formData.id = res.id
  })
}

getDictInfo();


const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      updateDict(formData).then(res=>{
        ElMessage.success('设置保存成功')
        getDictInfo();
      }).catch(err=>{
        ElMessage.error(err.message)
      })
    }
  })
}
</script>

<style scoped>


.content-body {
  padding-top: 10px;
}

.content-body h3 {
  margin-bottom: 20px;
  color: #303133;
}
</style>